<h1>角色列表</h1>
<a href="/admin/roles/create" class="btn btn-success mb3">添加用户</a>
<form method="get" action="/admin/roles" class="mb-3 mt-3">
    <div class="input-group">
        <input type="text" name="keyword" class="form-control" placeholder="请输入搜索关键字" value="{{keyword}}">
        <button class="btn btn-outline-secondary">搜索</button>
    </div>
</form>
<table class="table">
    <thead>
        <tr>
            <td>名称</td>
            <td>状态</td>
            <td>排序</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        {{#each roles}}
        <tr>
            <td>{{this.name}}</td>
            <td><span class="status-toggle" data-id="{{this.id}}" data-status="{{this.status}}">
                {{#if this.status}}
                <i class="bi bi-check-circle-fill text-success"></i>
                {{else}}
                <i class="bi bi-x-circle-fill text-danger"></i>
                {{/if}}
            </span></td>
            <td>
                <span class="sort-text" data-id="{{this.id}}">
                {{this.sort}}
                </span>
                <input 
                    type="number" class="form-control sort-input d-none" 
                    style="width:50%" data-id="{{this.id}}"
                    value="{{this.sort}}"
                />
            </td>
            <td>
                <a href="/admin/roles/{{this.id}}" class="btn btn-primary btn-sm">查看</a>
                <a href="/admin/roles/{{this.id}}/edit" class="btn btn-warning btn-sm">修改</a>
                <a class="btn btn-danger btn-sm" onclick="deleteRole({{this.id}})">删除</a>
                <button class="btn btn-info btn-sm" onclick="assignAccesses({{this.id}})">分配资源</button>
            </td>
        </tr>
        {{/each}}
    </tbody>
</table>
<nav>
    <ul class="pagination">
        <li class="page-item {{#if (eq page 1)}} disabled {{/if}}">
            <a class="page-link" href="?page={{dec page}}&keyword={{keyword}}&limit={{limit}}">上一页</a>
        </li>
        {{#each (range 1 pageCount)}}
        <li class="page-item {{#if (eq this ../page)}} active {{/if}}">
            <a class="page-link" href="?page={{this}}&keyword={{../keyword}}&limit={{../limit}}">{{this}}</a>
        </li>
        {{/each}}
        
        <li class="page-item {{#if (eq page pageCount)}}disabled{{/if}}">
            <a class="page-link" href="?page={{inc page}}&keyword={{keyword}}&limit={{limit}}">下一页</a>
        </li>
        <li class="page-item">
           <form method="get" action="/admin/roles" class="d-inline-block ms-3">
                <input type="hidden" name="keyword" value="{{keyword}}">
                <input type="hidden" name="page" value="{{page}}">
                <div class="input-group">
                    <input type="number" name="limit" class="form-control" placeholder="每页的条数" value="{{limit}}" min="1">
                    <button class="btn btn-outline-secondary" type="submit">设置每页的条数</button>
                </div>
            </form>
        </li>
    </ul>
</nav>
<div class="modal fade" id="accessModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">给角色分配资源</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="accessForm" action="">
                    <div id="accessTree" class="border ronded p-3"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secodary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveAccesses">保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    const accessTree = {{{json accessTree}}}
    let selectedRoleId;
    
    function assignAccesses (roleId){
        selectedRoleId = roleId
        $.ajax({
            url: `/admin/roles/${selectedRoleId}`,
            type: 'get',
            headers: {'accept': 'application/json'},
            success: ({role}) => {
                const accessIds = role.accesses.map(access => access.id)
                $('#accessForm input[type="checkbox"]').each(function () {
                    $(this).prop('checked',accessIds.includes(parseInt($(this).val())))
                })
                $('#accessModal').modal('show')
            }
        })
    }
    function renderTree(accesses){
        let html = `<ul class="list-unstyled">`
        accesses.forEach(function (access) {
            html+= `
                <li class="mb-2">
                    <div class="d-flex align-items-center">
                    ${access.children?.length>0?`<span class="toggle me-2 cursor-pointer"><i class="bi bi-folder-minus"></i></span>`:'<span class="me-4"></span>'}
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input parent-checkbox" data-id="${access.id}" value="${access.id}" />
                            ${access.name}
                        </label>
                    </div>
                        ${access.children?.length>0?`<div class="children ms-4">${renderTree(access.children)}</div>`: ''}
                    
                </li>
            `
        })
        html += '</ul>'
        return html
    }

    function deleteRole(id){
        if (confirm('确定要删除吗')) {
            $.ajax({
                url: `/admin/roles/${id}`,
                type: 'delete',
                success: (data) => {
                    if (data.success) {
                        const params = new URLSearchParams(window.location.search)
                        params.delete('page')
                        params.append('page', 1)
                        const query = params.toString()
                        window.location = window.location.pathname + '?' + query
                    }
                }
            })
        }
    }

    $(() => {
        $('#accessTree').html(renderTree(accessTree))
        $('#saveAccesses').on('click', function () {
        const accessIds = $('#accessForm input[type="checkbox"]:checked').map(function (){
            return $(this).val()
        }).get()

        $.ajax({
            url: `/admin/roles/${selectedRoleId}/accesses`,
            type: 'put',
            headers: {'accept': 'application/json'},
            contentType: 'application/json',
            data: JSON.stringify({accessIds}),
            success: ({user}) => {
                $('#accessModal').modal('hide')
                alert('资源分配成功')
            },
            error: (error) => {
                alert(error.responseJSON.message)
            }
        })
    })
        $('body').on('click', '.togger', function () {
            const children = $(this).parent().siblings('.children')
            if (children.is('.visible')) {
                children.hide()
                $(this).html('<i class="bi bi-folder-plus"></i>')
            } else {
                children.show()
                $(this).html('<i class="bi bi-folder-minus"></i>')
            }
        })
        $('body').on('change', '.parent-checkbox', function () {
            const isChecked = $(this).is(':checked')
            $(this).closest('li').find('.children input[type="checkbox"]').prop('checked', isChecked)
        })
        $('.sort-text').on('dblclick', function () {
            const $this = $(this)
            const id =$this.data('id')
            $this.addClass('d-none')
            $(`.sort-input[data-id="${id}"]`).removeClass('d-none').focus()
        })
        $('.sort-input').on('blur', function () {
            const $this =$(this)
            const id = $this.data('id')
            const newSort = $this.val()
            $this.addClass('d-none')
            $(`.sort-input[data-id="${id}"]`).removeClass('d-none').text(newSort)

            $.ajax({
                url: `/admin/roles/${id}`,
                headers: {
                    'accept': 'application/json'
                },
                contentType: 'application/json',
                type: 'put',
                data: JSON.stringify({sort: +newSort}),
                success: (data) => {
                    if (data.success) {
                        location.reload()
                    }
                }
            })
        })
        $('.status-toggle').on('click',function(){
            const $this =$(this)
            const id = $this.data('id')
            const currentStatus = $this.data('status')
            const newStatus = currentStatus==1?0:1
            $.ajax({
                url: `/admin/roles/${id}`,
                headers: {
                    'accept': 'application/json'
                },
                contentType: 'application/json',
                type: 'put',
                data: JSON.stringify({status: newStatus}),
                success: (data) => {
                    if (data.success) {
                        location.reload()
                    }
                }
            })
        })
    })
</script>